/**
 * @description 验证是否开通kms权限
 */
import React from 'react';
import { Button, PopConfirm } from '@teamix/ui';
import exceed from 'utils/apimap';
import './kmsStatusCheckConfirm.scss';
import intl from '../../../../../../../../../locale';

const open_kms_link = 'https://common-buy.aliyun.com/?commodityCode=kms';
export default class KmsStatusCheckConfirm extends React.Component {
  state = {
    visible: true,
    enabled: true,
  };

  checkKmsStatus = () => {
    exceed
      .fetch({
        api: 'user.kms.check',
      })
      .then((result) => {
        this.setState({
          enabled: result.enabled,
        });

        if (result.enabled) {
          this.props.onClick && this.props.onClick();
        }
      })
      .catch(() => {
        this.setState({
          enabled: false,
        });
      });
  };

  onVisibleChange = (visible) => {
    this.setState({
      visible,
    });
  };

  render() {
    const { visible, enabled } = this.state;
    const { trigger } = this.props;
    return (
      <span onClick={this.checkKmsStatus}>
        {enabled ? (
          trigger
        ) : (
          <PopConfirm
            triggerType="click"
            onVisibleChange={this.onVisibleChange}
            align="br"
            title={intl.get({
              id: 'code-assets.crypto.containers.kmsStatusCheckConfirm.AuthorizeKms',
              defaultMessage: '授权 KMS 服务',
            })}
            content={
              <div className="kms-status-confirm-content">
                <div className="kms-confirm-title">
                  {intl.get({
                    id: 'code-assets.crypto.containers.kmsStatusCheckConfirm.YouHaveNotActivatedKms',
                    defaultMessage: '您尚未开通 KMS，无法进行授权，是否立即开通 KMS 服务 ？',
                  })}
                </div>
                <div className="kms-confirm-footer">
                  <Button
                    type="normal"
                    size="xs"
                    onClick={() => {
                      this.setState({
                        visible: false,
                      });
                    }}
                    style={{ marginRight: 12 }}
                  >
                    {intl.get({
                      id: 'code-assets.crypto.containers.kmsStatusCheckConfirm.Cancel',
                      defaultMessage: '取消',
                    })}
                  </Button>
                  <Button
                    type="primary"
                    size="xs"
                    href={open_kms_link}
                    component="a"
                    target="_blank"
                    onClick={() => {
                      this.setState({
                        visible: false,
                      });
                    }}
                  >
                    {intl.get({
                      id: 'code-assets.crypto.containers.kmsStatusCheckConfirm.Activate',
                      defaultMessage: '前往开通',
                    })}
                  </Button>
                </div>
              </div>
            }
            footer={false}
            visible={visible}
            trigger={trigger}
            type="warning"
          />
        )}
      </span>
    );
  }
}
